<template>
  <div v-loading="state.loading" class="flex-column">
    <div style="height: 50px" class="flex-row-center-between gap20">
      <span class="bold flex1">代理客户清单</span>
      <div class="flex-row-center-between gap10">
        <div style="height: 10px; width: 10px; background: #dbdbdb"></div>
        <span>代理数</span>
      </div>
      <div class="flex-row-center-between gap10">
        <div style="height: 10px; width: 10px; background: #1fc16d"></div>
        <span>在线数 </span>
      </div>
    </div>
    <div class="flex-row-top-between container" style="flex-wrap: wrap; overflow: auto">
      <DistibuteItem v-for="item in state.list" :data="item" :key="item.customerName" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import request from '@/service'
  import { Ui } from '@/utils'
  import DistibuteItem from '../cpns/distribute-item.vue'
  import type { AgentData, AgentDistributionItem } from '../config'

  const state = reactive({
    loading: false,
    list: [] as AgentDistributionItem[]
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const query = () => {
    state.loading = true
    request
      .get<AgentData>('/agent/statistics')
      .then(res => {
        if (res.code !== 0) return Ui.useMessage('error', res.msg)
        const { agentDistributionList } = res.data.agentDistribution
        state.list = agentDistributionList
      })
      .finally(() => (state.loading = false))
  }

  /**----------------------------lifecycle----------------------------------------------------------------------- */

  query()
</script>

<style scoped lang="less">
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
</style>
